{{extend 'layout.html'}}

<style>
  .chart {width: 90%}
  .chart a {text-decoration: none; }
  .chart table {width:80%; font-size: 0.7em}
  .chart table, .chart th, .chart tr, .chart td { border:0; padding:0; margin:0; vertical-align:middle;}
</style>

<h1>Search by {{=prefix.capitalize()}}</h1>

{{m = max(d[1] for d in data)}}
<ul data-role="listview"  data-inset="true">
  {{for d in data:}}
  <li style="white-space: nowrap"><a href="{{=URL('bytag',vars=dict(tag='%s/%s' %(prefix,d[0])))}}"><span style="float:left;width:100px">{{=prefix}}/{{=d[0]}}</span><br/>
    <span style="float: left; height:5px; width:{{=400*d[1]/m}}px; background-color: #FADB4E; border: 1px solid black;" class="chartbar ui-btn ui-btn-inline ui-shadow ui-btn-up-d"></span><span style="font-size:0.7em">({{=d[1]}})</span>
    </a>
  </li>
  {{pass}}
</ul>
<script>
  jQuery('.chartbar').each(function(){
     var size = jQuery(this).css('width');
     jQuery(this).css('width',0).animate({'width':size},1500);
  });
</script>
